<!--
 * @Description: 
 * @Author: xjc
 * @Date: 2022-06-21 11:02:14
 * @LastEditTime: 2022-06-21 11:28:59
 * @LastEditors: xjc
-->
<template>
  <div id="gradients-container" />
</template>

<script setup>
import {onMounted} from 'vue'
// eslint-disable-next-line no-undef
const {Area} = G2Plot

onMounted(() => renderGradients())

function renderGradients() {
  fetch('https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json')
  .then(res => res.json())
  .then(data => {
    const area = new Area('gradients-container', {
      data,
      xField: 'Date',
      yField: 'scales',
      xAxis: {
        range: [0, 1],
        tickCount: 5,
      },
      areaStyle: () => {
        return {
          fill: 'l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff',
        };
      },
    });
    area.update({ 
      "theme": { 
        "styleSheet": { 
          "brandColor": "#025DF4", 
          "paletteQualitative10": ["#025DF4", "#DB6BCF", "#2498D1", "#BBBDE6", "#4045B2", "#21A97A", "#FF745A", "#007E99", "#FFA8A8", "#2391FF"], 
          "paletteQualitative20": ["#025DF4", "#DB6BCF", "#2498D1", "#BBBDE6", "#4045B2", "#21A97A", "#FF745A", "#007E99", "#FFA8A8", "#2391FF", "#FFC328", "#A0DC2C", "#946DFF", "#626681", "#EB4185", "#CD8150", "#36BCCB", "#327039", "#803488", "#83BC99"] 
        } 
      } 
    })
    area.render()
  })
}
</script>
